<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="门头照"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <view class="content">
      <view class="upload-section">
        <UploadMedia
          v-model="photos"
          :max-count="10"
          :max-size="5"
          upload-text="选择图片"
          upload-type="image"
          :enable-drag="true"
          @change="handleChange"
        />
      </view>

      <view class="submit-btn" @click="handleSubmit">
        <text>重新上传</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import UploadMedia from "@/components/UploadMedia/UploadMedia.vue";

// 照片列表
const photos = ref([
  { url: "/static/logo.png", type: "image" },
  { url: "/static/logo.png", type: "image" },
]);

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 照片变化
const handleChange = (val) => {
  console.log("照片变化:", val);
};

// 提交
const handleSubmit = () => {
  if (photos.value.length === 0) {
    uni.showToast({
      title: "请至少上传一张照片",
      icon: "none",
    });
    return;
  }

  // TODO: 调用接口上传
  uni.showToast({
    title: "上传成功",
    icon: "none",
  });

  // 返回上一页
  setTimeout(() => {
    goBack();
  }, 1500);
};
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 20rpx 32rpx;
  padding-top: 20rpx;
}

.upload-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  background: #faa820;
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 12rpx;

  &:active {
    opacity: 0.8;
  }
}
</style>
